<template>
	<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
		<div>
			<el-select filterable v-model="localQueryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" disabled>
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<el-select disabled v-model="localQueryParams.brandName" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="品牌" multiple collapse-tags collapse-tags-tooltip remote remote-show-suffix :remote-method="searchbrandList" @change="queryList" @focus="brandList.length == 0 ? getBrandList() : ''">
				<el-option v-for="(item, index) in brandList" :key="index" :label="item.brandName" :value="item.brandName" />
			</el-select>
			<el-select filterable v-model="localQueryParams.sourceType" class="zs-select-md zs-space-right-sm" placeholder="欠款口径" disabled>
				<el-option v-for="item in arrearsTypeDropdownRespList" :key="item.code" :label="item.name" :value="item.code" />
			</el-select>
			<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
				<template #reference>
					<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': localQueryParams.chargetypeGroupId.length > 0 || localQueryParams.chargetypeIdList.length > 0 || localQueryParams.financePeriodStartDate || localQueryParams.financePeriodEndDate }">
						<el-icon>
							<MoreFilled />
						</el-icon>
					</el-button>
				</template>
				<template #default>
					<el-select disabled filterable @change="changeCharge" v-model="localQueryParams.chargetypeGroupId" class="zs-select-md zs-space-right-sm" placeholder="费项类型" multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
						<el-option v-for="item in chargeTypeList" :key="item.feeItemId" :label="item.feeItemName" :value="item.feeItemId" />
					</el-select>
					<el-select disabled filterable v-model="localQueryParams.chargetypeIdList" class="zs-select-md zs-space-right-sm" placeholder="费项名称" multiple collapse-tags collapse-tags-tooltip clearable :teleported="false">
						<el-option v-for="item in chargeTypeSecondList" :key="item.feeItemId" :label="item.feeItemName" :value="item.feeItemId" />
					</el-select>
					<el-date-picker class="zs-space-right-sm" v-model="localQueryParams.financePeriodStartDate" type="month" value-format="YYYY-MM" placeholder="权责开始月" clearable :disabled-date="disabledDateStart" :teleported="false" />
					<el-date-picker class="zs-space-right-sm zs-space-top-sm" v-model="localQueryParams.financePeriodEndDate" type="month" value-format="YYYY-MM" placeholder="权责结束月" clearable :disabled-date="disabledDateEnd" :teleported="false" />
				</template>
			</el-popover>
			<el-button @click="queryList" class="zs-btn-plain">查询</el-button>
		</div>
		<div>
			<el-button class="zs-btn-plain" @click="handleDownload">
				<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
			</el-button>
		</div>
	</div>
</template>

<script setup>
	import detailApi from '@/api/Manage/Business/detailPages';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { reactive, ref } from 'vue';
	import { useRoute } from 'vue-router';
	const route = useRoute();
	const props = defineProps({
		queryParams: {
			type: Object,
			required: true,
		},
	});

	const emit = defineEmits(['queryList', 'handleSwitch']);

	const localQueryParams = reactive({ ...props.queryParams });

	const queryList = () => {
		emit('queryList', localQueryParams);
	};

	//欠款口径
	const arrearsTypeDropdownRespList = ref([
		{ code: 0, name: '账单口径' },
		{ code: 1, name: '权责口径' },
		{ code: 2, name: '考核口径' },
	]);

	// 查询项目下拉选
	const projectList = ref([]);
	const getPorjectList = () => {
		detailApi.queryProjectApi({ type: 1 }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
			}
		});
	};

	// 欠款追缴-品牌
	const brandList = ref([]);
	const getBrandList = brandName => {
		detailApi.queryBrandApi({ projectCode: route.query.projectCode, type: 1, brandName }).then(res => {
			if (res.data.errorCode != 200) return;
			brandList.value = res.data.data || [];
		});
	};
	const searchbrandList = query => {
		query.length > 0 ? getBrandList(query) : '';
	};

	//费项树
	let chargeTypeList = ref([]);
	const getDebtChargeList = async () => {
		let res = await detailApi.getChargeListApi(route.query.projectCode);
		chargeTypeList.value = res.data.data || [];
	};

	//费项名称
	const chargeTypeSecondList = ref([]);
	const getChargeNameList = async () => {
		let res = await detailApi.getChargeNameByTypeListApi({ feeItemId: localQueryParams.chargetypeGroupId, projectCode: route.query.projectCode });
		chargeTypeSecondList.value = res.data.data || [];
	};

	//费项分类改变
	const changeCharge = () => {
		localQueryParams.chargetypeIdList = [];
		getChargeNameList();
	};

	//导出
	const handleDownload = async () => {
		let params = Object.assign({}, localQueryParams);
		let fileData = await detailApi.querySumBillDebtamtExportApi(params);
		downloadNewFile(fileData.data, '欠款追缴费项报表.xls');
	};

	//时间判断
	const disabledDateStart = date => {
		if (!localQueryParams.financePeriodEndDate) return false;
		return date.getTime() > new Date(localQueryParams.financePeriodEndDate).getTime();
	};

	const disabledDateEnd = date => {
		if (!localQueryParams.financePeriodStartDate) return false;
		return date.getTime() < new Date(localQueryParams.financePeriodStartDate).getTime();
	};

	getPorjectList();
	getDebtChargeList();
	getBrandList();
	getChargeNameList();
</script>

<style type="sass" scoped>
	:deep(.zs-select-md .select-trigger .el-select__tags-text) {
		max-width: 150px!important;
	}
</style>
